<script lang="ts">
	import { onMount } from 'svelte';
	import RuleNav from '$lib/components/Layout/RuleNav.svelte';

	// 规则分类数据
	const ruleCategories = [
		{
			id: 'basic',
			title: '基础工程规范',
			icon: '🏗️',
			sections: [
				{
					id: 'tech-stack',
					title: '技术栈与工具链',
					content: `核心框架：Svelte 5（启用 Runes）、SvelteKit 2.x
类型系统：TypeScript 5.x（强制开启严格模式）
包管理：pnpm（推荐，支持 monorepo）
代码格式化：Prettier + ESLint（配置 Svelte 专属规则）
样式预处理：原生CSS 变量（优先）+ PostCSS（可选，用于自动前缀）
构建工具：Svelte Package（组件打包）、Vite（开发 / 构建）
测试工具：Vitest + Svelte Testing Library（单元测试 / 组件测试）`
				},
				{
					id: 'project-structure',
					title: '项目目录结构',
					content: `遵循SvelteKit 官方推荐的目录结构，组件库核心代码放置在src/lib下。项目结构应清晰地划分功能模块，便于维护和扩展。`
				}
			]
		},
		{
			id: 'coding',
			title: '代码开发规范',
			icon: '📝',
			sections: [
				{
					id: 'naming',
					title: '命名规范',
					content: `组件文件: PascalCase + .svelte (如 Button.svelte、InputNumber.svelte)
工具函数文件: camelCase + .ts (如 formatNumber.ts)
类型定义文件: PascalCase + .types.ts (如 Button.types.ts)
变量/常量: camelCase（变量）、UPPER_SNAKE_CASE（常量）(如 buttonSize、MAX_WIDTH)
CSS类名: BEM规范（块-元素-修饰符）(如 btn、btn__icon、btn--lg)
CSS变量: kebab-case (如 --color-primary-600)`
				},
				{
					id: 'runes',
					title: 'Svelte 5 Runes使用规范',
					content: `强制使用Svelte 5的Runes特性替代旧版语法，核心规则：
响应式状态：使用$state()替代let声明响应式变量
Props定义：使用$props()声明组件属性，强制类型约束
派生状态：使用$derived()替代计算属性
生命周期：使用onMount()/onDestroy()替代旧版生命周期函数`
				},
				{
					id: 'typescript',
					title: 'TypeScript规范',
					content: `强制开启tsconfig.json的严格模式：
组件Props、事件、工具函数必须添加类型定义，禁止使用any类型（特殊场景用unknown替代）。
自定义类型/接口命名使用PascalCase，如interface ButtonProps。`
				},
				{
					id: 'components',
					title: '组件开发核心规则',
					content: `单一职责：一个组件仅实现一个核心功能（如Button仅处理按钮逻辑，不包含表单提交）。
按需拆分：大型组件（如Table、Form）拆分为子组件（如TableHeader、FormItem），避免单文件代码量超过500行。
插槽规范：插槽命名使用kebab-case，核心插槽用默认插槽，辅助插槽命名清晰（如slot="icon"、slot="suffix"）。
事件规范：组件事件名使用kebab-case，前缀统一（如btn-click、input-change），避免与原生事件重名。`
				}
			]
		},
		{
			id: 'size',
			title: '尺寸规范',
			icon: '📏',
			sections: [
				{
					id: 'size-overview',
					title: '尺寸基础规则',
					content: `组件的尺寸属性必须仅支持sm（小）、md（中，默认）、lg（大）三个值，禁止自定义尺寸字符串（如small/large）。
所有尺寸基于8px网格系统（企业级设计常用），确保视觉一致性。`
				},
				{
					id: 'size-variables',
					title: '基础尺寸变量（CSS变量）',
					content: `在src/lib/styles/variables.css中定义全局尺寸变量，遵循以下命名规范：
--size-sm: 对应小型组件尺寸
--size-md: 对应中型组件尺寸（默认）
--size-lg: 对应大型组件尺寸`
				},
				{
					id: 'size-mapping',
					title: '组件尺寸映射示例',
					content: `不同组件的尺寸需基于基础变量映射，确保一致性：
- 按钮高度: sm=32px, md=40px, lg=48px
- 输入框高度: sm=32px, md=40px, lg=48px
- 间距: sm=8px, md=16px, lg=24px`
				}
			]
		},
		{
			id: 'color',
			title: '色彩规范',
			icon: '🎨',
			sections: [
				{
					id: 'color-rules',
					title: '色彩系统概述',
					content: `色彩系统分为主色、辅助色、功能色（成功/警告/错误/信息）和中性色，所有色彩通过CSS变量定义，确保主题可定制性。
遵循WCAG 2.1无障碍标准（文本与背景对比度≥4.5:1）。`
				},
				{
					id: 'color-naming',
					title: '色彩变量命名规则',
					content: `CSS变量命名格式：--color-[类型]-[色阶]，其中色阶为50-900（50最浅，900最深），参考Material Design色彩体系。`
				},
				{
					id: 'color-primary',
					title: '主色（Primary Color）',
					content: `主色为组件库的品牌核心色，推荐使用蓝色系（企业级产品常用，代表信任、专业）。
核心使用场景：按钮（primary类型）、输入框聚焦边框、导航栏、选中状态等。
无障碍要求：主色500/600与白色文本对比度≥4.5:1。`
				},
				{
					id: 'color-secondary',
					title: '辅助色（Secondary Color）',
					content: `辅助色用于强调和区分次要功能，推荐使用紫色/橙色系。
使用场景：标签、徽章、进度条、次要按钮等。`
				},
				{
					id: 'color-functional',
					title: '功能色（Functional Color）',
					content: `功能色用于表达操作状态：
成功: 绿色系
警告: 黄色系
错误: 红色系
信息: 蓝色系（不同于主色）`
				},
				{
					id: 'color-neutral',
					title: '中性色（Neutral Color）',
					content: `中性色用于文本、背景、边框等基础布局，定义灰度色阶：
--color-neutral-50: 最浅灰色
--color-neutral-900: 最深灰色（接近黑色）`
				}
			]
		},
		{
			id: 'styling',
			title: '样式开发规范',
			icon: '🎛️',
			sections: [
				{
					id: 'styling-rules',
					title: '样式编写规则',
					content: `CSS变量优先：所有尺寸、色彩必须使用全局CSS变量，禁止硬编码数值/颜色。
Scoped样式：组件样式默认使用Svelte的scoped（<style scoped>），避免样式污染。
BEM命名：CSS类名遵循BEM规范（块-元素-修饰符），如btn__icon、btn--lg。
避免！important：仅在覆盖原生组件样式的极端场景使用，且需添加注释说明。
组件响应式优先通过CSS变量适配，避免JavaScript动态修改样式。`
				},
				{
					id: 'a11y',
					title: '无障碍（A11Y）规范',
					content: `色彩与文本对比度符合WCAG 2.1 AA级标准（≥4.5:1）。
组件支持键盘导航（Tab/Enter/Space），添加tabindex和role属性。
表单组件添加aria-label/aria-describedby等无障碍属性。`
				}
			]
		},
		{
			id: 'other',
			title: '其他核心规则',
			icon: '⚙️',
			sections: [
				{
					id: 'performance',
					title: '性能优化',
					content: `避免不必要的响应式状态，使用$state的细粒度响应式；大型组件（如Table）支持虚拟滚动。`
				},
				{
					id: 'theming',
					title: '主题定制',
					content: `支持通过覆盖CSS变量实现主题定制，提供light、dark主题。`
				},
				{
					id: 'error-handling',
					title: '错误处理',
					content: `组件内部捕获异常，避免崩溃，提供友好的错误提示。`
				}
			]
		}
	];

	// 当前激活的分类
	let activeCategory = 'basic';
	// 当前激活的章节
	let activeSection = '';

	// 处理分类点击
	const handleCategoryClick = (categoryId: string) => {
		activeCategory = categoryId;
		const category = ruleCategories.find(c => c.id === categoryId);
		if (category && category.sections.length > 0) {
			activeSection = category.sections[0].id;
			scrollToSection(`${categoryId}-${activeSection}`);
		}
	};

	// 处理章节点击
	const handleSectionClick = (categoryId: string, sectionId: string) => {
		activeCategory = categoryId;
		activeSection = sectionId;
		scrollToSection(`${categoryId}-${sectionId}`);
	};

	// 滚动到指定章节
	const scrollToSection = (id: string) => {
		const element = document.getElementById(id);
		if (element) {
			element.scrollIntoView({ behavior: 'smooth', block: 'start' });
		}
	};

	// 监听滚动，更新激活状态
	const handleScroll = () => {
		const sections = document.querySelectorAll('.rule-section');
		let currentActiveSection = '';
		
		sections.forEach(section => {
			const rect = section.getBoundingClientRect();
			if (rect.top <= 200 && rect.bottom >= 200) {
				currentActiveSection = section.id;
			}
		});

		if (currentActiveSection) {
			const [categoryId, sectionId] = currentActiveSection.split('-');
			if (categoryId && sectionId) {
				activeCategory = categoryId;
				activeSection = sectionId;
			}
		}
	};

	// 初始化页面
	onMount(() => {
		// 默认激活第一个分类的第一个章节
		if (ruleCategories.length > 0 && ruleCategories[0].sections.length > 0) {
			activeCategory = ruleCategories[0].id;
			activeSection = ruleCategories[0].sections[0].id;
			scrollToSection(`${activeCategory}-${activeSection}`);
		}

		// 添加滚动监听
		window.addEventListener('scroll', handleScroll);

		// 清理函数
		return () => {
			window.removeEventListener('scroll', handleScroll);
		};
	});

	// SEO相关
	$: title = '代码规范与设计规则 | Dhzy UI';
</script>

<div class="rule-page-container">
	<!-- 页面头部 -->
	<header class="rule-header">
		<div class="header-content">
			<h1 class="page-title">企业级Svelte 5 + SvelteKit UI 组件库</h1>
			<h2 class="page-subtitle">代码规范与设计规则</h2>
			<p class="page-description">
				本规范针对基于Svelte 5（含 Runes 特性）和SvelteKit开发的企业级 UI 组件库制定，涵盖代码开发、组件设计、样式规范（尺寸 / 色彩）等核心内容，确保组件库的可维护性、一致性和可扩展性。
			</p>
		</div>
	</header>

	<!-- 主要内容区域 -->
	<div class="rule-content">
		<!-- 左侧内容 -->
		<main class="rule-main">
			<div class="rule-content-wrapper">
				{#each ruleCategories as category}
					{#each category.sections as section}
						<section 
							id={`${category.id}-${section.id}`} 
							class="rule-section"
							tabindex="-1"
						>
							<h2 class="section-heading">
								<span class="section-icon">{category.icon}</span>
								{section.title}
							</h2>
							<div class="section-content">
								<pre class="content-pre">{section.content}</pre>
							</div>
						</section>
					{/each}
				{/each}

				<!-- 总结部分 -->
				<section class="rule-section summary-section" id="summary">
					<h2 class="section-heading">
						<span class="section-icon">📋</span>
						总结
					</h2>
					<div class="section-content">
						<p>
							本规范是企业级Svelte UI组件库开发的基础准则，后续可根据业务需求扩展组件专属规则（如Table的列配置、Form的校验规则）。
							开发过程中需严格遵循尺寸（sm/md/lg）和色彩的强制定义，确保组件库的一致性和专业性。
						</p>
					</div>
				</section>
			</div>
		</main>

		<!-- 右侧导航 -->
		<aside class="rule-sidebar">
			<RuleNav 
				categories={ruleCategories}
				activeCategory={activeCategory}
				activeSection={activeSection}
				onCategoryClick={handleCategoryClick}
				onSectionClick={handleSectionClick}
			/>
		</aside>
	</div>

	<!-- 返回顶部按钮 -->
	<button 
		class="back-to-top"
		on:click={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
		aria-label="返回顶部"
	>
		↑
	</button>
</div>

<style lang="scss">
	.rule-page-container {
		min-height: 100vh;
		background-color: var(--color-background);
		color: var(--color-text-primary);
	}

	.rule-header {
		background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
		color: white;
		padding: 3rem 1.5rem;
		text-align: center;

		.header-content {
			max-width: 1200px;
			margin: 0 auto;
		}

		.page-title {
			font-size: 2.25rem;
			font-weight: 700;
			margin: 0 0 0.5rem 0;
		}

		.page-subtitle {
			font-size: 1.5rem;
			font-weight: 600;
			margin: 0 0 1rem 0;
			opacity: 0.95;
		}

		.page-description {
			font-size: 1.1rem;
			line-height: 1.6;
			max-width: 800px;
			margin: 0 auto;
			opacity: 0.9;
		}
	}

	.rule-content {
		display: grid;
		grid-template-columns: 1fr 320px;
		max-width: 1400px;
		margin: 0 auto;
		padding: 2rem 0;
		gap: 2.5rem;

		@media (max-width: 1200px) {
			grid-template-columns: 1fr 300px;
			gap: 2rem;
		}

		@media (max-width: 1024px) {
			grid-template-columns: 1fr 280px;
			gap: 1.5rem;
			padding: 1.5rem;
		}

		@media (max-width: 768px) {
			grid-template-columns: 1fr;
			padding: 1rem;
		}
	}

	.rule-sidebar {
		position: sticky;
		top: 2rem;
		height: calc(100vh - 4rem);
		overflow-y: auto;
		border-left: 1px solid var(--color-border, #e8e8e8);
		padding-left: 1rem;
		background-color: var(--color-background, #fff);
		border-radius: var(--border-radius, 8px);
		box-shadow: -4px 0 12px rgba(0, 0, 0, 0.05);

		@media (max-width: 768px) {
			position: relative;
			top: 0;
			height: auto;
			border-left: none;
			border-top: 1px solid var(--color-border, #e8e8e8);
			padding-left: 0;
			padding-top: 1rem;
			box-shadow: none;
		}

		
	}

	.rule-main {
		.rule-content-wrapper {
			padding-bottom: 3rem;

			.rule-section {
				margin-bottom: 3rem;
				padding: 2.5rem;
				background-color: var(--color-background, #fff);
				border-radius: var(--border-radius, 12px);
				border: 1px solid var(--color-border, #e8e8e8);
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
				transition: all 0.3s ease;

				&:focus {
					outline: 2px solid var(--color-primary, #1890ff);
					outline-offset: 2px;
				}

				&:hover {
					box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
					transform: translateY(-2px);
				}

				.section-heading {
					display: flex;
					align-items: center;
					gap: 1rem;
					margin-top: 0;
					margin-bottom: 1.75rem;
					font-size: 1.65rem;
					font-weight: 700;
					color: var(--color-text-primary, #333);
					position: relative;
					padding-bottom: 0.75rem;

					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 0;
						height: 3px;
						width: 60px;
						background: linear-gradient(90deg, var(--color-primary, #1890ff), transparent);
						border-radius: 3px;
					}

					.section-icon {
						font-size: 2rem;
						background-color: var(--color-primary-light, #e6f7ff);
						width: 48px;
						height: 48px;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50%;
						color: var(--color-primary, #1890ff);
					}
				}

				.section-content {
					.content-pre {
						background: var(--color-background-secondary, #fafafa);
						padding: 1.75rem;
						border-radius: var(--border-radius, 8px);
						border: 1px solid var(--color-border, #e8e8e8);
						font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
						font-size: 0.95rem;
						line-height: 1.7;
						white-space: pre-wrap;
						overflow-x: auto;
						margin: 0;
						color: var(--color-text-primary, #333);
						box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
					}

					p {
						font-size: 1.05rem;
						line-height: 1.7;
						margin: 0 0 1rem 0;
						color: var(--color-text-primary, #333);
					}
				}
			}

			.summary-section {
				border-left: 4px solid var(--color-primary, #1890ff);
				background: linear-gradient(90deg, var(--color-primary-light, #e6f7ff) 0%, transparent 100%);
				border-radius: 0 var(--border-radius, 12px) var(--border-radius, 12px) 0;
				padding-left: 2rem;
			}
		}
	}

	.back-to-top {
		position: fixed;
		bottom: 2rem;
		left: 2rem;
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		background-color: var(--color-primary, #1890ff);
		color: white;
		border: none;
		cursor: pointer;
		font-size: 1.25rem;
		font-weight: bold;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
		backdrop-filter: blur(4px);

		&:hover {
			background-color: var(--color-primary-dark, #0056b3);
			transform: translateY(-4px) scale(1.05);
			box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
		}

		&:active {
			transform: translateY(0) scale(0.98);
		}

		@media (max-width: 768px) {
			bottom: 1rem;
			left: 1rem;
			width: 2.5rem;
			height: 2.5rem;
			font-size: 1rem;
		}
	}

	@media (max-width: 768px) {
	.rule-header {
		padding: 2rem 1rem;

		.page-title {
			font-size: 1.75rem;
		}

		.page-subtitle {
			font-size: 1.25rem;
		}

		.page-description {
			font-size: 1rem;
		}
	}

	.rule-main {
		.rule-content-wrapper {
			.rule-section {
				padding: 1.75rem;

				.section-heading {
					font-size: 1.45rem;

					.section-icon {
						width: 40px;
						height: 40px;
						font-size: 1.5rem;
					}
				}

				.section-content {
					.content-pre {
						padding: 1.25rem;
						font-size: 0.85rem;
					}
				}
			}
		}
	}

	/* 移动端优化 */
	.rule-page-container {
		--color-background: #fff;
		--color-background-secondary: #fafafa;
		--color-text-primary: #333;
		--color-text-secondary: #666;
		--color-border: #e8e8e8;
		--color-primary: #1890ff;
		--color-primary-light: #e6f7ff;
		--color-primary-dark: #0056b3;
		--border-radius: 8px;
	}
	}
</style>